import React, { Component } from 'react'
import { Button } from 'antd'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import PropTypes from 'prop-types'
import moment from 'moment'
import { calendar } from '../assets/js/calendar'
import style from './Calendar.module.less'

export default class Calendar extends Component {
  state = {
    year: 0,
    month: 0,
    date: 0,
    dateList: []
  }

  initToday () {
    const t = moment()
    this.setState({
      year: t.year(),
      month: t.month(),
      date: t.date()
    })
  }

  // 初始化日期列表
  initDayList () {
    let { year, month } = this.state
    const t = moment()
    const list = []
    t.year(year)
    t.month(month)
    t.add(1, 'month')
    t.date(1)
    t.subtract(1, 'd')
    const max = t.date()
    t.date(1)
    year = t.year()
    month = t.month() + 1
    const day = t.day()
    for (let i = 0; i < day; i++) {
      list.push(null)
    }
    for (let i = 1; i <= max; i++) {
      const obj = calendar.solar2lunar(year, month, i)
      list.push({
        date: `${year}-${this.formatDouble(month)}-${this.formatDouble(i)}`,
        day: i,
        IDayCn: obj.IDayCn,
        Term: obj.Term,
        festival: obj.festival,
        lunarFestival: obj.lunarFestival
      })
    }
    this.setState({
      dateList: list
    })
  }

  preMonth () {
    let { year, month, date } = this.state
    month = this.formatDouble(month + 1)
    const t = moment(`${year}-${month}-${date}`)
    t.subtract(1, 'month')
    this.setState({
      year: t.year(),
      month: t.month(),
      date: t.date()
    }, () => {
      this.initDayList()
      this.triggerChangeHandle()
    })
  }

  nextMonth () {
    let { year, month, date } = this.state
    month = this.formatDouble(month + 1)
    const t = moment(`${year}-${month}-${date}`)
    t.add(1, 'month')
    this.setState({
      year: t.year(),
      month: t.month(),
      date: t.date()
    }, () => {
      this.initDayList()
      this.triggerChangeHandle()
    })
  }

  // 格式化数字
  formatDouble (num) {
    num = num >= 10 ? num : '0' + num
    return num
  }

  // 改变选择天
  changeDate (date) {
    this.setState({
      date
    }, () => {
      this.triggerChangeHandle()
    })
  }

  // 触发日期改变回调函数
  triggerChangeHandle () {
    const { year, month, date } = this.state
    const t = moment()
    t.year(year)
    t.month(month)
    t.date(date)
    this.props.changeHandle(t.format('YYYY-MM-DD'))
  }

  componentDidMount () {
    this.initToday()
    setTimeout(() => {
      this.initDayList()
    }, 120)
  }

  renderDateList () {
    return this.state.dateList.map((obj, i) => {
      return obj ? this.renderDate(obj) : <li key={i}>&nbsp;</li>
    })
  }

  renderDate (obj) {
    const className = []
    if (obj.day === this.state.date) {
      className.push(style.active)
    }
    if (this.props.tagList.indexOf(obj.date) !== -1) {
      className.push(style.tag)
    }
    return (
      <li className={className.join(' ')} key={obj.date} onClick={() => this.changeDate(obj.day)}>
        <span className={style['calendar-li__text']}>
          <div>{obj.day}</div>
          <div>{obj.lunarFestival || obj.festival || obj.Term || obj.IDayCn}</div>
        </span>
      </li>
    )
  }

  render () {
    let { year, month, date } = this.state
    month = this.formatDouble(month + 1)
    date = this.formatDouble(date)
    return (
      <div className={style.container}>
        <div className={style['title-line']}>
          <span className={style['body-title__text']}>{year}年{month}月{date}日</span>
          <div className={style['body-title__btns']}>
            <Button shape='circle' icon={<LeftOutlined />} onClick={() => this.preMonth()} />
            <Button shape='circle' icon={<RightOutlined />} onClick={() => this.nextMonth()} />
          </div>
        </div>
        <ul className={style['calendar-title-list']}>
          <li>
            <span>日</span>
          </li>
          <li>
            <span>一</span>
          </li>
          <li>
            <span>二</span>
          </li>
          <li>
            <span>三</span>
          </li>
          <li>
            <span>四</span>
          </li>
          <li>
            <span>五</span>
          </li>
          <li>
            <span>六</span>
          </li>
        </ul>
        <ul className={style['calendar-list']}>
          {this.renderDateList()}
        </ul>
      </div>
    )
  }
}

Calendar.propTypes = {
  changeHandle: PropTypes.func,
  tagList: PropTypes.array
}

Calendar.defaultProps = {
  changeHandle: function () {},
  tagList: []
}
